<template>
    <div class="con-info" @mousemove.stop="clearInterval" @mouseleave.stop="setInterval" :class="{ 'succ-alert': succ, 'fail-alert': !succ }" >
      <i  class="fa icon-pic" :class="[classType]" aria-hidden="true"></i>
      <div  class="el-info__content">
        <p class="el-info__description">{{text}}</p>
      </div>
      <i  class="icon-pic info-btn" @click="destoryAlert">×</i>
      <div  class="info-progress" ref="progress" ></div>
    </div>
</template>
<script>
    import Vue from 'vue'
    import Bus from '@/common/js/vueBus.js';
    export default {
        data(){
            return{
                succ : true,
                timeout:null,
                count:100,
                text:'请求成功',
                classType:'fa-check-circle'
            }
        },
        components:{

        },
        computed:{

		},
        methods:{
            progressInterval:function(){
                var self = this;
                var width = this.getWidth(self.$refs.progress,width);
                this.timeout = setTimeout(function(){
                    self.$refs.progress && (self.$refs.progress.style.width = self.count - 1 + "%");
                    self.count--;
                    Vue.nextTick(function(){
                        if ( parseInt(self.getWidth(self.$refs.progress,width)) > 0) {
                            self.progressInterval();
                        }else {
                            self.timeout = null;
                            self.count = 100;
                        } 
                    })
                } , 17)
            },
            getWidth : function(element,width){
                if (!element) {return;}
                if(element.currentStyle){
                    return element.currentStyle.width; //ie下先获取样式
                }else{
                    return getComputedStyle(element,false).width; //FF下获取样式
                }
            },
            clearInterval:function(e){
                console.log(e.target.className,"enter");
                // if (e.target.className.indexOf('con-info') === -1) {
                //     return;
                // }
                Bus.$emit('clearInterval', true); 
                window.clearTimeout(this.timeout);
                this.timeout = null;
            },
            setInterval:function(e){  
                console.log(e.target,"out"); 
                // if (e.target.className.indexOf('con-info') === -1) {
                //     return;
                // }         
                Bus.$emit('clearInterval', false, this.count);
                this.progressInterval();
            },
            destoryAlert:function(){
                Bus.$emit('clearInterval', 'close');
                window.clearTimeout(this.timeout);
                this.timeout = null;
            }
        },
        props:{
        },
        mounted:function(){
            this.progressInterval();
            
        }
    }
</script>
<style >
    
  .con-info {
      width: 40%;
      margin: 0;
      top:0;
      left:30%;
      box-sizing: border-box;
      border-radius: 4px;
      padding: 8px 16px;
      position: fixed;  
      overflow: hidden;
      color: #fff;
      opacity: 1;
      display: table;
      transition: opacity .2s;
      z-index:23000;
  }
  .fail-alert{
      background-color: #ff4949;
  }
  .succ-alert{
      background-color: #13ce66;
  }


  .icon-pic {
      font-size: 20px;
      width: 20px;
      display: table-cell;
      color: #fff;
      vertical-align: middle;
  }


  .el-info__content {
      display: table-cell;
      padding: 0 8px;
      vertical-align: middle;
  }

  .info-btn{
      font-size: 30px;
      width: 30px;
  }
  .info-progress{
    position: absolute;
    bottom:0;
    left:0;
    background-color: #000;
    height:4px;
    border-radius: 2px;
    opacity: 0.4;
    width:100%;
  }
</style>
<style>
 /*::-ms-clear,::-ms-reveal{display:none !important;}*/
</style>
